import React from 'react';
import { Card, Table, Button, Space, message } from 'antd';
import type { ColumnsType } from 'antd/es/table';

interface DataType {
  key: string;
  name: string;
  description: string;
  createTime: string;
}

const ListManage: React.FC = () => {
  const columns: ColumnsType<DataType> = [
    {
      title: '名称',
      dataIndex: 'name',
      key: 'name',
    },
    {
      title: '描述',
      dataIndex: 'description',
      key: 'description',
    },
    {
      title: '创建时间',
      dataIndex: 'createTime',
      key: 'createTime',
    },
    {
      title: '操作',
      key: 'action',
      render: (_, record) => (
        <Space size="middle">
          <Button type="link" onClick={() => handleEdit(record)}>
            编辑
          </Button>
          <Button type="link" danger onClick={() => handleDelete(record)}>
            删除
          </Button>
        </Space>
      ),
    },
  ];

  const data: DataType[] = [
    {
      key: '1',
      name: '示例项目1',
      description: '这是一个示例项目',
      createTime: '2024-03-20 10:00:00',
    },
    {
      key: '2',
      name: '示例项目2',
      description: '这是另一个示例项目',
      createTime: '2024-03-20 11:00:00',
    },
  ];

  const handleEdit = (record: DataType) => {
    message.info(`编辑项目: ${record.name}`);
  };

  const handleDelete = (record: DataType) => {
    message.success(`删除项目: ${record.name}`);
  };

  return (
    <Card title="列表管理">
      <Table columns={columns} dataSource={data} />
    </Card>
  );
};

export default ListManage; 